<%--
  Created by IntelliJ IDEA.
  User: Mr.G
  Date: 2019/2/18
  Time: 19:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>药品销售统计</title>
    <%@include file="/WEB-INF/jsp/common.jsp"%>
    <script src="${path}/assets/js/echarts.common.min.js"></script>
</head>
<body>
<div class="layui-row">
    <div class="col-md-6">
        <form class="layui-form" action="" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">时间</label>
                <div class="layui-input-inline">

                    <select name="" class="layui-select" lay-filter="time" id="">
                        <option value="1">当日</option>
                        <option value="2">本周</option>
                        <option value="3">本月</option>
                        <option value="4">本年</option>
                    </select>
                </div>
            </div>

        </form>
    </div>
    <div class="col-md-6">
        <div id="main" style="width: 600px;height:400px;"></div>
    </div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //设置等待图
    myChart.showLoading();

    // 指定图表的配置项和数据
    // 初始 option
    var option = {
        title: {
            text: '药品销售前10'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    };

    myChart.setOption(option);

    $.post('${path}/Echart/Top',function (data) {
        var xq = data.username;
        var xqsum = data.countNum ;
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: xq,
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '药品销量',
                type: 'bar',
                data: xqsum,

            }]
        });
        //隐藏等待图
        myChart.hideLoading();
    }) ;

    layui.use(['table','form'],function () {
        layui.form.on('select(time)', function(data){
            var state = data.value
            $.get('${path}/Echart/Top',{state:state},function (data){
                var name=data.username;
                var count =data.countNum;
                myChart.setOption({
                    xAxis: {
                        type: 'category',
                        data: name,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: count,

                    }]
                });
                //隐藏等待图
                myChart.hideLoading();
            }) ;
        });
    })
</script>
</body>
</html>
